<template>
    <div class="eventReport" id="eventReport">
        <div class="box">
            <div class="reportsBar">
                <div
                    :class="[
                        { reportsTitle: true },
                        { activeReport: currentKey === -1 },
                    ]"
                    @click="selectReport(-1)"
                >
                    初报
                </div>
                <div
                    :class="[
                        { reportsTitle: true },
                        { activeReport: currentKey === index },
                    ]"
                    v-for="(item, index) of eventInfo.disasterFeedbacks"
                    :key="index"
                    @click="selectReport(index)"
                >
                    {{ `续报${index + 1}` }}
                </div>
            </div>
            <!-- content -->
            <div class="reportsCont">
                <div class="header">
                    <h3>突发事件信息专报</h3>
                    <div class="time">
                        <span>{{ currentReport.sendDeptTitle }}</span>
                        <!-- <span>{{
                            currentReport.createTime.replace("T", " ")
                        }}</span> -->
                    </div>
                </div>
                <div class="section">
                    <h3>{{ currentReport.title }}</h3>
                    <div
                        class="content"
                        id="emergencyDescription"
                        v-html="currentReport.description"
                    ></div>
                </div>
                <div class="footer">
                    <div class="receiver">
                        {{ `报送:${currentReport.receiveReportDept}` }}
                    </div>
                    <div class="worker">
                        <span>{{ `编辑：${eventInfo.sendUserName}` }}</span>
                        <span>{{ `联系电话：暂无` }}</span>
                        <span>{{ `签发：${currentReport.signUserName}` }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="funcBtn">
            <p
                @click="loadReport()"
                :style="{ cursor: countDown > 0 ? 'not-allowed' : 'pointer' }"
            >
                <img
                    class="mouseout"
                    src="/images/fireReport/icon/xiazai.png"
                    alt=""
                />
                <img
                    class="mousein"
                    src="/images/fireReport/icon/xiazai2.png"
                    alt=""
                />下载<span v-show="countDown > 0">({{ countDown }})</span>
            </p>
            <p @click="closePreview(false)">
                <img
                    class="mouseout"
                    src="/images/fireReport/icon/close.png"
                    alt=""
                />
                <img
                    class="mousein"
                    src="/images/fireReport/icon/close2.png"
                    alt=""
                />关闭
            </p>
        </div>
    </div>
</template>

<script>
import axios from "axios";
export default {
    name: "eventReport",
    data() {
        return {
            currentKey: -1, //tabbr高亮控制器
            countDown: 0,
        };
    },
    props: ["eventInfo"],
    watch: {
        eventInfo: {
            handler(val) {
                this.currentKey = -1;
            },
            deep: true,
        },
    },
    computed: {
        currentReport() {
            //当前展示的事件报告
            if (this.currentKey === -1) {
                return this.eventInfo;
            } else {
                return this.eventInfo.disasterFeedbacks[this.currentKey];
            }
        },
    },
    methods: {
        // 选择报告
        selectReport(key) {
            this.currentKey = key;
            console.log(key);
        },
        // 关闭报告
        closePreview() {
            this.$emit("closeReport", false);
        },
        deepClone(obj) {
            if (typeof obj === "object" || obj == null) {
                return obj;
            }
            let result;
            if (result instanceof Array) {
                result = [];
            } else {
                result = {};
            }
            for (let key in obj) {
                if (obj.hasOwnProperty(key)) {
                    result[key] = deepClone(obj[key]);
                }
            }
            return obj;
        },
        // 专报下载
        loadReport() {
            console.log(this.currentReport);
            let obj = JSON.parse(JSON.stringify(this.currentReport))
            console.log(obj);
           
            let descriptionArr = [];
            this.$nextTick(() => {
                let dom = document.querySelectorAll("#emergencyDescription p");
                console.log(dom);
                dom.forEach((item) => {
                    descriptionArr.push(item.textContent);
                });
                obj.description = descriptionArr;
                console.log(obj);
                //请求报告description
                axios({
                    url:`${sjzxUrl}/api/disaster/download/specialReport`,
                    method:"post",
                    data:obj,
                    responseType: 'blob'
                }).then(res=>{
                    let data = res.data;
                        let url = URL.createObjectURL(
                            new Blob([data], {
                                type: "application/vnd.ms-excel;charset=utf-8 ",
                            })
                        );
                        let link = document.createElement("a");
                        link.style.display = "none";
                        link.href = url;
                        link.setAttribute("download", "突发事件专题报告.docx");

                        document.body.appendChild(link);
                        link.click();
                });
                // axios
                //     .post(
                //         `${sjzxUrl}/api/disaster/download/specialReport`,
                //         { disaster: obj },
                //         { responseType: "blob" }
                //     )
                //     .then((res) => {
                //         let data = res.data;
                //         let url = URL.createObjectURL(
                //             new Blob([data], {
                //                 type: "application/vnd.ms-excel;charset=utf-8 ",
                //             })
                //         );
                //         let link = document.createElement("a");
                //         link.style.display = "none";
                //         link.href = url;
                //         link.setAttribute("download", "突发事件专题报告.docx");

                //         document.body.appendChild(link);
                //         link.click();
                //     });
                // {
                // "address": "茂坤村",
                // "createTime": "2021-06-29 18:27:15",
                // "deathNum": 2,
                // "description": ["省应急管理厅：","2021年6月29日下午15时51分许，我局指挥中心接到消防指挥中心来报称：在儋州市那大镇茂坤村附近的水利沟发","                     ", "                     儋州市应急管理局", "                            2021年6月29日","",""],
                // "disasterFeedbacks": [],
                // "disasterLevel": "4",
                // "disasterType": "a_a_a",
                // "govArea": "/海南省/儋州市/那大镇/",
                // "happenTime": "2021-06-29 15:21:00",
                // "id": 842,
                // "injuredNum": 0,
                // "isReportSafeProd": 0,
                // "lat": "19.516961170216387",
                // "lon": "109.54264380013524",
                // "missNum": 0,
                // "periodNumber": 32,
                // "receiveDeptId": 959,
                // "receiveDeptTitle": "海南省应急管理厅",
                // "receiveReportDept": "海南省应急管理厅值班室",
                // "sendDeptId": 3691,
                // "sendDeptTitle": "儋州市应急管理局",
                // "sendTim"e: "2021-06-29 18:29:03",
                // "sendUserName": "刘锦康",
                // "signUserName": "羊炜伟",
                // "title": "儋州市应急管理局 关于那大镇2021年6月29日发生一起溺水事件的情况报告",
                // "updateTime": "2021-06-29 18:29:09",
                // }
            });
            //window.open(`${sjzxUrl}/api/disaster/download/specialReport?id=${this.currentReport.id}`)
        },
        // 下载文件
        download(data) {
            let url = URL.createObjectURL(
                new Blob([data], {
                    type: "application/vnd.ms-excel;charset=utf-8 ",
                })
            );
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", "突发事件专报.docx");
            document.body.appendChild(link);
            link.click();
        },
    },
};
</script>
<style>
.eventReport p {
    color: #000;
}
</style>
<style lang="stylus" scoped>
.eventReport {
    position: fixed;
    left: 0;
    right:0;
    top: 0;
    bottom: 0;
    margin:auto;
    width: vw(1000);
    z-index: 303;
    height:vh(850);
    background: rgba(255, 255, 255, 1);
    padding: 10px;

    .box {
        width: 100%;
        height: 100%;
        overflow: auto;

        .reportsBar {
            display: flex;
            justify-content: flex-start;
            padding: 20px;
            color: #000;

            .reportsTitle {
                padding: 10px;
                cursor: pointer;
                border-radius: 5px;
                color: #000;
            }

            .reportsTitle.activeReport {
                color: #fff;
                background: rgba(30, 51, 94, 0.8);
            }
        }

        .reportsCont {
            padding: 20px;
            color: #515a6e;

            .header {
                h3 {
                    font-size: 36px;
                    font-weight: 900;
                    color: red;
                    margin: 0.3rem 0;
                    text-align: center;
                    font-family: SimSun;
                }

                .time {
                    display: flex;
                    justify-content: space-between;
                    border-bottom: 2px solid red;
                    padding-bottom: 6px;
                    font-family: FangSong;
                    font-size: 20px;

                    span {
                        color: #000;
                    }
                }
            }

            .section {
                // min-height:3rem;
                padding: 0 50px 10px;
                padding-bottom: 200px;
                text-align: left;

                h3 {
                    text-align: center;
                    font-size: 30px;
                    font-weight: 900;
                    font-family: FangSong;
                    margin: 30px 0 25px;
                    color: #000;
                }

                .content {
                    line-height: 30px;

                    p {
                        color: #000;
                    }
                }
            }

            .footer {
                font-size: 20px;
                font-family: FangSong;
                text-align: left;

                .receiver {
                    border-bottom: 2px solid red;
                    padding-bottom: 6px;
                    color: #000;
                }

                .worker {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 6px;

                    span {
                        color: #000;
                    }
                }
            }
        }
    }

    .funcBtn {
        color: #fff;
        padding-top: 5px;
        position: absolute;
        bottom: -35px;
        right: 10px;
        text-align: center;

        p {
            float: right;
            margin-left: 20px;
            cursor: pointer;
            width: 102px;
            height: 30px;
            line-height: 30px;
            font-size: 18px;
            opacity: 1;
            background: #042039;
            border: 1px solid #17d0ff;
            border-radius: 3px;
            color: #17d0ff;

            img {
                width: 18px;
                height: 18px;
                vertical-align: middle;
                margin-right: 8px;
            }

            .mousein {
                display: none;
            }
        }

        p:hover {
            background: #05718c;
            color: #fff;

            .mousein {
                display: inline-block;
            }

            .mouseout {
                display: none;
            }
        }
    }
}
</style>